// components/test01/test01.js
// components/test/test.js
/** 
 * 格式化代码快捷键：(设置-快捷键)。shift + option + f
 * 移动到上下行：option + （上下）箭头
 * 复制到下行：shift + option + ↓
 * 
 * 1、创建组件，在与pages、images、common同级下新建components文件夹，
 * 然后新建文件夹：test。在test下右键，选择新建Component。输入组件名称回车即可省组件四件套（.js\.json\.wxml\.wxss）
 * 一般来说组件按文件夹分类/独立划分
 * 
 * 【注意：组件新建未被已用会报错;页面【components/test01/test01]错误:
 Error: components/test01/test01.js 已被代码依赖分析忽略，无法被其他模块引用。你可根据控制台中的【代码依赖分析】告警信息修改代码，或关闭【过滤无依赖文件】功能。详情请查看：https://developers.weixin.qq.com/community/develop/article/doc/00020631afc6c8c6f62e7b91855c13...)】
 * 
 * 2、组件引用：
 * ①局部引用，组件只能在当前被引用的页面内使用
 * ②全局引用，组件可以在每一个小程序页面中使用
 * 在对应的.json文件中引用。事例代码(与navigationBarTitleText(home.json)、pages(app.json)同级)
 *  {
 *    "usingComponents": {
 *      "my-test1":"/components/test/test.js" 
 *      // my-test1,声明/定义一个名字(类似别名)，即声明一个组件名，然后再wxml中类似view的节点使用方式使用
 *    }
 *  }
 * 
 * 3、引用选择建议，根据使用频率与范围。如果在多个页面中经常被用到建议全局引用，如果仅在特定页面使用建议是局部引用。
 * 
 * 4、组件与页面的区别
 *    从表面看都由4件套(js、json、wxml、wxss)组成。
 *    不同：
 *      · 组件中json文件中需要声明“component”:true属性
 *      · 组件的js文件中调用的是Component函数，页面的是Page函数。
 *      · 组件的事件处理函数需要定义到methods节点中。
 * 
 * 5、组件样式隔离
 *  默认情况先自定义组件的样式只对当前组件生效，不影响组件外的UI结构
 *  如自定义组件A、自定义组件C都在一个也页面上。A、C互不影响，A、C与其它页面互不影响
 *  好处：①防止外界样式影响内部样式。②防止组件样式破坏外界样式。
 * 注意点，
 *  ①app.wxss中的样式默认对组件无效。如.g-red-text。
 *  ②只有class选择器会有样式隔离效果，id、属性、标签选择器不受样式隔离效果。所以一般建议使用clas选择器。否则容易导致样式混乱。如app.wxss的view标签选择器
 * 修改默认的样式隔离选项。有时希望外界能够控制组件内部的样式。通过styleIsolation修改组件的样式隔离选项。用法如下
 * 在组件的js文件中新增如下配置Component的子节点
 *  options:{
 *    styleIsolation:'isolated' 
 * // isolated(默认)隔离；apply-shared页面选择器影响组件内部，反向不影响；shared互相影响且包含其他apply-shared、shared的自定义组件
 *  }
 * 
 * 或者组件的json文件中新增配置
 * {
 *  "styleIsolattion":"isolated"
 * }
 */
Component({
  // options:{
  //   styleIsolation:"shared"
  // },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    // 用于组件模板渲染的私有数据需要定义到js文件的data节点中
    count: 0
  },

  /**
   * 组件的方法列表(包含事件处理函数和自定义方法)
   */
  methods: {
    // 事件处理函数
    toast() {
      this.setData({
        count: this.data.count + 1
      })
      wx.showToast({
        title: '组件Click',
      })
    },
    // 事件处理函数,与wxml中的bingtap对应
    addCount() {
      this.setData({
        count: this.data.count + 1
      })
      this._showCount() // 通过this直接调用自定义方法
    },
    // 自定义方法，一般用_开头标识
    _showCount() {
      wx.showToast({
        title: 'count = ' + this.data.count,
        icon: 'none'
      })
    }
  }

})